<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>妈妈，母亲节快乐！</title>
		<link rel="stylesheet" type="text/css" href="http://common.hlj.sina.com.cn/xingguangyaorensheng/css/reset.css">
		<!--<link rel="stylesheet" type="text/css" href="http://common.hlj.sina.com.cn/xingguangyaorensheng/css/index.css">-->
			
		<style>
		.borderBox {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
		}

		/*----------------------------------------------*/
		
		.border_left_top,
		.border_right_top,
		.border_right_bottom,
		.border_left_bottom {
			position: absolute;
			width: 16px;
			height: 16px;
			background-size: 100% 100%;
			background-image: url(border_left_top.jpg);
		}
		
		.border_left_top {
			left: 0;
			top: 0;
		}
		
		.border_right_top {
			right: 0;
			top: 0;
			transform: rotateY(180deg);
		}
		
		.border_right_bottom {
			right: 0;
			bottom: 0;
			transform: rotate(180deg);
		}
		
		.border_left_bottom {
			left: 0;
			bottom: 0;
			transform: rotateX(180deg);
		}
		
		
		/*----------------------------------------------*/
		
		.border_top {
			position: absolute;
			top: 0;
			left: 16px;
			width: calc(100% - 32px);
			height: 16px;
			background-size: auto 100%;
			background-image: url(border_top.jpg);
		}
		
		.border_right {
			position: absolute;
			top: 16px;
			right: 0;
			height: calc(100% - 32px);
			width: 16px;
			background-size: 100% auto;
			background-image: url(border_left.jpg);
			transform: rotateY(180deg);
		}
		
		.border_bottom {
			position: absolute;
			left: 16px;
			bottom: 0;
			width: calc(100% - 32px);
			height: 16px;
			background-size: auto 100%;
			background-image: url(border_top.jpg);
			transform: rotateX(180deg);
		}
		
		.border_left {
			position: absolute;
			top: 16px;
			left: 0;
			height: calc(100% - 32px);
			width: 16px;
			background-size: 100% auto;
			background-image: url(border_left.jpg);
		}
		
		.logo{
			position:absolute;
			left:30px;
			top:30px;
			width:30%;
			background-size:100% 100%;
			background-image:url(2.png);	
		}
		
		/*----------------------------------------------*/
		.tab_1{
			position:fixed;
			left:0;
			top:0;
			width:100%;
			height:100%;
			background-size:100% 100%;
			background-image: url(bg.jpg);
			transform: scale(1,1);
		}
		
		.tab_2{
			position:absolute;
			
			top:11%;
			left:69.6%;
			width:13%;
			
			background-size:100% 100%;
			background-image: url(bg1.jpg);
			box-sizing: border-box;
			/*border:2px solid #fff;*/
		}
		
		.tab_3{
			position:absolute;
			top:5%;
			right:10%;
			width:10.5%;
			background-size:100% 100%;
			background-image: url(bg2.jpg);
		}
		
		.tab_4{
			position:absolute;
			top:12.5%;
			left:8%;
			width:10.5%;
			background-size:100% 100%;
			background-image: url(bg3.jpg);
		}
		
		.tab_5{
			position:absolute;
			top:16%;
			left:80.5%;
			width:10.5%;
			background-size:100% 100%;
			background-image: url(bg4.jpg);
		}
		
		.tab_6{
			position:absolute;
			top:14.5%;
			left:15%;
			width:12%;
			background-image: url(bg8.jpg);
			background-size:100% 100%;
		}
		.tab_7{
			position:absolute;
			top:14.5%;
			left:10%;
			width:12%;
			background-image: url(bg5.jpg);
			background-size:100% 100%;
		}
		
		
		.tab_8{
			position:absolute;
			top:14.5%;
			left:10%;
			width:12%;
			background-image: url(bg6.jpg);
			background-size:100% 100%;
		}
		/**/
		
		.imgBox{
			position:absolute;
			left:10%;
			top:77%;
			width:80%;
			height:100%;
			background-size:100% 100%;
			opacity: 0;
			text-align: center;
			font-size: 20px;
		}
		
		/*.img_1{
			background-image: url(text_1.png);
		}
		
		.img_2{
			background-image: url(text_2.png);
		}
		
		.img_3{
			background-image: url(text_3.png);
		}
		
		.img_4{
			background-image: url(text_4.png);
		}
		
		.img_5{
			background-image: url(text_5.png);
		}
		
		.img_6{
			background-image: url(text_6.png);
		}*/
		
		/**/
		
		.clred_l{
			position:fixed;
			top:0;
			left:0;
			width:100% !important;
			height:100% !important;
			transform: scale(1,1);
		}
		
		/**/
		.swiper-container {
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
		}  
		.swiper-slide{
			width:100% !important;
			height:100% !important;
		}
		.swiper-slide:nth-child(1){
			background-size:100% 100%;
			background-image: url(bg6.jpg);
		}
		
		.tit{
			position:absolute;
			left:0;
			top:0;
			width:100%;
			height:100%;
			background-size:100% 100%;
		}
		
		audio {
			width: 0;
			height: 0;
			opacity: 0;
		}
		
		
		.slidebutton {
			    -webkit-animation: start 1.5s infinite ease-in-out;
			    -moz-animation: start 1.5s infinite ease-in-out;
			    animation: start 1.5s infinite ease-in-out;
			    z-index: 100;
			    position: absolute;
			    left: 46%;
			    width: 8%;
			    bottom: 8%;
			}
				@-webkit-keyframes start {
			    0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
			    60% {opacity: 1;-webkit-transform: translate(0,0);}
			    100% {opacity: 0;-webkit-transform: translate(0,-8px);}
			}
			@-moz-keyframes start {
			    0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
			    60% {opacity: 1;-moz-transform: translate(0,0);}
			    100% {opacity: 0;-moz-transform: translate(0,-8px);}
			}
			@keyframes start {
			    0%,30% {opacity: 0;transform: translate(0,10px);}
			    60% {opacity: 1;transform: translate(0,0);}
			    100% {opacity: 0;transform: translate(0,-8px);}
			}
			  .wz1{
			 	text-align: left;
    			margin-bottom: 10px;
			 }		
			  .wz2{
			 	text-align: right;
			 }		 		 
		</style>
		
		<link rel="stylesheet" href="http://n.sinaimg.cn/tj/82e4bf6f/20180309/animate.min.css">
		<link rel="stylesheet" href="http://n.sinaimg.cn/tj/82e4bf6f/20180309/swiper.min.css" />
	</head>
<body style="">
		
		<div class="borderBox">
			<div class="border_left_top"></div>
			<div class="border_right_top"></div>
			<div class="border_right_bottom"></div>
			<div class="border_left_bottom"></div>
			<div class="border_top"></div>
			<div class="border_right"></div>
			<div class="border_bottom"></div>
			<div class="border_left"></div>
			<div class="logo" style="height: 30.2723px;"></div>
		</div>
		<div class="tab_1" o_x="288" o_y="80" style="-webkit-transform-origin-x: 288px; -webkit-transform-origin-y: 80px;">
			<div class=" img_1" style="opacity: 1;">
				<img src="http://n.sinaimg.cn/tj/bcd462bc/20180710/go.png" class="slidebutton">
			</div>
			<div class="tab_2" style="height: 96px;">
				<div class="imgBox img_2">您是我眼中最美的女子!</div>
				<div class="tab_3" style="height: 10.6667px;">
					<div class="imgBox img_3"><p class="wz1">您不是歌唱家，</p><p class="wz2">却能唱出最好听的歌曲！</p></div>
					<div class="tab_4" style="height: 1.77778px;">
						<div class="imgBox img_4"><p class="wz1">您不是哲学家，</p><p class="wz2">却教会了我做人的道理！</p></div>
						<div class="tab_5" style="height: 0.0555556px;">
							<div class="imgBox img_5"><p class="wz1">您不是美食家，</p><p class="wz2">却能做出最可口的饭菜！</p></div>
							<div class="tab_6" style="height: 0px;">
								<div class="imgBox img_6"><p class="wz1">对不起，妈妈，</p><p class="wz2">好久没有回家看望您！</p></div>
									<div class="tab_7" style="height: 0.0555556px;">
										<!--<div class="imgBox ">妈妈我很好，愿您一切都好！节日快乐！</div>-->
												<div class="swiper-container">
												    <div class="swiper-wrapper">
												        <div class="swiper-slide">
															<div class="imgBox img_7 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
																<p class="wz1">妈妈我很好，</p><p class="wz2">愿您一切都好！节日快乐！</p>
															</div>
												        </div>
												    </div>
												</div>
										
									</div>
							
							</div>
						<!--</div>-->
					</div>
				</div>
			</div>
		</div>
		<!--audio-->
		<audio id="audioid" src="" controls="" preload="" loop="" autoplay=""></audio>
		
		<script src="http://n.sinaimg.cn/tj/bd1d28f6/20170925/jquery2.1.3.min.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<!--<script src="http://demo.open.weixin.qq.com/jssdk/js/api-6.1.js?ts=1420774989"></script>-->
		
		<script src="http://common.hlj.sina.com.cn/xingguangyaorensheng/js/TweenMax.min.js"></script>
		<script src="http://common.hlj.sina.com.cn/xingguangyaorensheng/js/jquery.gsap.min.js"></script>
		<script src="http://common.hlj.sina.com.cn/xingguangyaorensheng/js/swiper-4.1.6.min.js"></script>
		<script src="http://common.hlj.sina.com.cn/xingguangyaorensheng/js/swiper.animate1.0.3.min.js"></script>
		<!--<script src="http://common.hlj.sina.com.cn/xingguangyaorensheng/js/index.js"></script>-->
		
		<script>
			$(function() {

	$('body').on('touchmove', function(event) {
		event.preventDefault();
	});
	$('img').on('touchend', function(event) {
		event.preventDefault();
	});

	var ww = $(window).width();
	var wh = $(window).height();
	var wb = ww / wh;

	//
	function usize(){
		$('.logo').css({
			'height': ($('.logo').width() / 213 * 52) + 'px'
		})
		$('.tab_2').css({
			'height': ($('.tab_2').width() / wb) + 'px'
		})
		$('.tab_3').css({
			'height': ($('.tab_3').width() / wb) + 'px'
		})
		$('.tab_4').css({
			'height': ($('.tab_4').width() / wb) + 'px'
		})
		$('.tab_5').css({
			'height': ($('.tab_5').width() / wb) + 'px'
		})
		$('.tab_6').css({
			'height': ($('.tab_6').width() / wb) + 'px'
		})
		$('.tab_7').css({
			'height': ($('.tab_7').width() / wb) + 'px'
		})
		$('.tab_8').css({
			'height': ($('.tab_8').width() / wb) + 'px'
		})
	}
	function uorg(e){
		try{
			$('.tab_'+e).attr({
				'o_x':parseInt($('.tab_'+(e+1)).offset().left),
				'o_y':parseInt($('.tab_'+(e+1)).offset().top)
			}).css({
				'transform-origin-x': parseInt($('.tab_'+(e+1)).offset().left)+'px',
				'transform-origin-y': parseInt($('.tab_'+(e+1)).offset().top)+'px'
			})
		}catch(e){
//			TODO handle the exception
		}
	}
	var mySwiper;
	function swiperHzx(){
		mySwiper= new Swiper('.swiper-container', {
			direction: 'vertical',
			loop: false,
//		    speed:1000,
		   	effect : 'fade',
			on: {
				init: function() {
					swiperAnimateCache(this); //隐藏动画元素 
					swiperAnimate(this); //初始化完成开始动画
				},
				slideChangeTransitionEnd: function() {
					swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
				}
			}
		})
	}
	usize();
	uorg(1);
//	swiperHzx();
	//touch
	var kX, kY, eX, eY;
	$(window).on('touchstart', function(e) {
		kX = e.originalEvent.touches[0].clientX;
		kY = e.originalEvent.touches[0].clientY;
	})

	$(window).on('touchmove', function(e) {
		eX = e.originalEvent.touches[0].clientX;
		eY = e.originalEvent.touches[0].clientY;
	})

	$(window).on('touchend', function(event) {
		if(kY > (eY + 50)) {
			touT();
		} else if(kY < (eY - 50)) {
			touB();
		}
	})
	var huaType = true;
	var dq = 1;
	var endNum = 7;  //最后一页为第7页
	var tab_pos = new Array();
	function touT() { //上滑放大
		if(dq==endNum){
//			mySwiper.slideNext();
//			console.log('下一页');
			return;
		}
		if(huaType) {
			huaType = false;
			console.log('上'+dq+'----'+(dq+1));
			var scb = parseFloat(ww/$('.tab_'+(dq+1)).width()).toFixed(2);
			$('.tab_'+dq).attr('scb',scb);
			tab_pos[dq] = {};
			tab_pos[dq].top = $('.tab_'+(dq+1)).offset().top;
			tab_pos[dq].left = $('.tab_'+(dq+1)).offset().left;
			$('.tab_'+dq).animate({
				'top':'-'+$('.tab_'+(dq+1)).offset().top+'px',
				'left':'-'+$('.tab_'+(dq+1)).offset().left+'px',
				scaleX:scb,
				scaleY:scb,
			},2000,function(){
				$('.tab_'+dq).removeAttr('style').addClass('clred_l');
				dq+=1;
				$('.tab_'+dq).addClass('clred_l');
				usize();
				uorg(dq);
				huaType = true;
//				$('.imgBox').css("opacity","0");
				imgShow(dq);
				if(dq==8){
					swiperHzx();
				}
				try{
					mySwiper.updateSize();
				}catch(e){
					//TODO handle the exception
				}
			})
		}
	}

	function touB() { //下滑
		var go = true;
		if(dq==endNum){
			go = true;
			
//			go = false;
//			if(mySwiper.activeIndex!=0){
//				mySwiper.slidePrev();
//				return;
//			}else{
//				go = true;
//			}
		}
		if(huaType) {
			if(dq==1){
				return;
			}
			huaType = false;
			if(go){
				console.log('返回上一层:'+dq+'-----'+(dq-1))
				console.log(tab_pos);
				$('.tab_'+dq+',.tab_'+(dq-1)).removeAttr('style').removeClass('clred_l');
				$('.tab_'+(dq-1)).css({
					'transform-origin-x': $('.tab_'+(dq-1)).attr('o_x')+'px',
					'transform-origin-y': $('.tab_'+(dq-1)).attr('o_y')+'px',
					'transform': 'scale('+$('.tab_'+(dq-1)).attr('scb')+','+$('.tab_'+(dq-1)).attr('scb')+')',
					'top':'-'+tab_pos[dq-1].top+'px',
					'left':'-'+tab_pos[dq-1].left+'px',
					'width':'100%',
					'height':'100%'
				}).animate({
					'transform': 'scale(1,1)',
					'top':0,
					'left':0,
				},1500,function(){
					huaType = true;
				})
				usize();
				imgShow(dq-1);
				if(dq!=1){
					dq-=1;
				}
				try{
					mySwiper.updateSize();
				}catch(e){
					//TODO handle the exception
				}
				
			}
		}
	}
	function imgShow(e){
		$('.imgBox').css("opacity","0");
//		$('.imgBox').css("opacity","0");
		setTimeout(function(){
			$('.img_'+e).animate({
				'opacity':'1'
			},500)
		},300)
	}
	imgShow(1);
	//bgm
	function audioAutoPlay() {
		var audio = document.getElementById('audioid');
		var play = function() {
			document.removeEventListener("WeixinJSBridgeReady", play);
			document.removeEventListener("YixinJSBridgeReady", play);
			audio.play();
		};
		audio.play();
		if(window.WeixinJSBridge) {
			audio.play();
		}
		//weixin
		if(typeof WeixinJSBridge == "undefined") {
			document.addEventListener("WeixinJSBridgeReady", play, false);
		} else {
			//yixin
			document.addEventListener('YixinJSBridgeReady', play, false);
			audio.play();
		}
	}
	audioAutoPlay();
})

		</script>
		   <!--<script>
		var meta =window.document.getElementsByTagName('meta');
		var share_desc = '';
		for(i in meta){
		 if(typeof meta[i].name!="undefined"&&meta[i].name.toLowerCase()=="description"){
		  share_desc = meta[i].content;
		 }
		}
			var _wxShareConfig = {
				title: document.title, // 分享标题
				desc: '妈妈，谢谢您给予我如此灿烂美好的生命!', // 分享描述
				link: window.location.href, // 分享链接
				imgUrl:'http://n.sinaimg.cn/tj/82e4bf6f/20190506/1.png', // 分享图标
				type: '', // 分享类型,music、video或link，不填默认为link
				dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			}
		</script>
		<script src="https://mjs.sinaimg.cn/wap/online/public/share/shareWx_main.js"></script>
	-->

	</body>
</html>